<!-- Dom模板 -->
<template>
  <div class="boxs">
    <!-- Dom内容 -->
    <div class="header">
      <div class="name">
        <span>管理员名称：</span>
        <span
          ><input
            type="text"
            placeholder="请输入管理员名称"
            v-model="$store.state.Administrator.glyName"
        /></span>
      </div>
      <div class="user">
        <span>管理员账号：</span>
        <span
          ><input
            type="text"
            placeholder="请输入账号"
            v-model="$store.state.Administrator.glyUser"
        /></span>
      </div>
      <div class="role">
        <span>所有角色：</span>
        <span>
          <select name="" id="roleBtn" @click="roleBtn">
            <option value="">请选择角色</option>
            <option value="超级管理员">超级管理员</option>
            <option value="王牌管理员">王牌管理员</option>
            <option value="管理员">管理员</option>
          </select>
        </span>
      </div>
      <div class="time">
        <span>创建时间</span>
        <input type="date" id="newdate" @click="timeBtn" />
      </div>
      <div class="headerBtn">
        <span><button class="blue" @click="seekBtn">搜索</button></span>
        <span><button class="yellow">重置</button></span>
      </div>
    </div>
    <div class="two">
      <span
        ><button class="blue" type="text" @click="open(tj)">新增</button></span
      >
      <span><button class="yellow">停用</button></span>
      <span><button class="red">删除</button></span>
      <span><button class="blue">导出</button></span>
    </div>
    <div class="table">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="checkAll" /></th>
            <th>序号</th>
            <th>管理员名称</th>
            <th>管理员账号</th>
            <th>手机号</th>
            <th>所属组织</th>
            <th>所属角色</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in $store.state.Administrator.list" :key="i">
            <td>
              <input
                type="checkbox"
                :checked="item.isCheck ? 'checked' : ''"
                @change="checkBtn(i)"
              />
            </td>
            <td>{{ i + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.user }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.tissue }}</td>
            <td>{{ item.role }}</td>
            <td>{{ item.time }}</td>
            <td class="caozuo">
              <span @click="xgBtn(xg, i)">修改</span>
              <span>停用</span>
              <span>删除</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div
      class="block"
      v-if="
        $store.state.Administrator.ishow || $store.state.Administrator.xgishow
      "
    ></div>
    <glyAlert
      class="glyAlert"
      v-if="$store.state.Administrator.ishow"
    ></glyAlert>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import glyAlert from "../../components/glyAlert/index.vue";
import { mapMutations, mapGetters,mapActions,mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      tj: 1,
      xg: 2,
      glyName: "", //管理员名字
    };
  },
  components: {
    glyAlert,
  },
  computed: {

    checkAll: {
      get() {
        return this.$store.state.Administrator.list.every((item) => {
          return item.isCheck;
        });
      },
      set(newAll) {
        this.$store.state.Administrator.list.forEach((item) => {
          item.isCheck = newAll;
        });
      },
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$store);
    this.getData()
  },
  // Vue方法定义
  methods: {
    ...mapMutations({
      ishowAll: "Administrator/ishowAll",
      xgIshow: "Administrator/xgIshow",
      setSeek: "Administrator/setSeek",
    }),
    ...mapGetters({
      getSeek: "Administrator/getSeek",
    }),
    ...mapActions({
      getData:"Administrator/getData"
    }),
    roleBtn() {
      this.$store.state.Administrator.glyrole =
        document.querySelector("#roleBtn").value;
      console.log(this.roleBtn);
    },
    timeBtn() {
      document.querySelector("#newdate").onchange = () => {
        this.$store.state.Administrator.newdate =
          document.querySelector("#newdate").value;
      };
    },
    open(tj) {
      this.ishowAll(tj);
      console.log(tj);
    },
    xgBtn(xg, i) {
      this.$store.state.Administrator.listIndex = i;
      this.ishowAll(xg);
      console.log(this.$store.state.Administrator.data);
      // console.log(xg,i);
    },
    checkBtn(i) {
      this.$store.state.Administrator.list[i].isCheck =
        !this.$store.state.Administrator.list[i].isCheck;
    },
    seekBtn() {
      console.log(this.getSeek());
      // this.setSeek(this.glyName)
      this.$store.state.Administrator.list = this.getSeek();
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.boxs {
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  padding:10px;
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
}

input {
  width: 145px;
  height: 30px;
}
#roleBtn {
  width: 145px;
  height: 30px;
}
button {
  width: 100px;
  height: 36px;
  margin: 0 10px;
  border-width: 0ch;
  border-radius: 5px;
  color: #fff;
}
.blue {
  background-color: #3894ff;
}
.yellow {
  background-color: #e29836;
}
.red {
  background-color: #ef4545;
}
.two {
  width: 100%;
  height: 50px;
  margin: 20px 0;
  margin-left: 27px;
}
.table input {
  width: 18px;
  height: 18px;
}
.table tr {
  height: 50px;
  line-height: 50px;
}
.table th,
.table td {
  padding: 0 20px;
  text-align: center;
}

.box .table {
  width: 90%;
  background: #fff;
}
.box .table table {
  border-collapse: collapse;
  border: none;
}
tr {
  width: 100%;
  height: 40px;
}
tr:nth-child(even){
  background: #f0f0f0;
}
td {
  text-align: center;
  padding:10px;
}
table thead {
  width: 100%;
  background: #f0f0f0;
}
.block {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
}
.glyAlert {
  width: 580px;
  height: 450px;
  background-color: #fff;
  position: fixed;
  top: 25%;
  left: 35%;
}
.caozuo span {
  margin: 0 10px;
  color: #1684fc;
}
</style>